﻿<!--@Knockout-->
<div class="demo-page">
    <div class="wrapper">
        <div data-bind="dxScheduler: {
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: new Date(2015, 4, 25),
            appointmentTemplate: 'appointment',
            height: 650
        }">
            <div data-options="dxTemplate: {name: 'appointment'}" style="padding: 0;">
                <div class="appointment-header" data-bind="text: text"></div>
                <div class="appointment-time"><span data-bind="text: from"></span> - <span data-bind="text: to"></span></div>
            </div>
        </div>
    </div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div class="demo-page" ng-controller="demoController">
    <div class="wrapper">
        <div dx-scheduler="{
            dataSource: schedulerData,
            startDayHour: 9,
            endDayHour: 18,
            currentView: 'week',
            currentDate: currentDate,
            appointmentTemplate: 'appointment',
            height: 650
        }" dx-item-alias="appItem">
            <div data-options="dxTemplate: {name: 'appointment'}" style="padding: 0;">
                <div class="appointment-header">{{appItem.text}}</div>
                <div class="appointment-time">{{appItem.from}} - {{appItem.to}}</div>
            </div>
        </div>
    </div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div class="demo-page">
    <div class="wrapper">
        <div id="myScheduler"></div>
    </div>
</div>
<!--/@jQuery-->